<template>
  <view class="section-content space-y-[16rpx]">
    <part0 v-if="comm" />
    <!-- 器官检查 -->
    <view class="subsection" v-if="!comm">
      <view class="subsection-header" @click="toggleSubsectionCollapse('organExamination')">
        <text class="subsection-title">器官检查</text>
        <IconFont 
          :name="collapseStates.organExamination ? 'arrow-up' : 'arrow-down'" 
          size="10" 
          color="#27c530" 
          :class="['transition-transform duration-200', collapseStates.organExamination ? 'rotate-180' : 'rotate-0']"
        />
      </view>
      <view v-show="collapseStates.organExamination" class="subsection-content">
        <ItemWithImagesCard
          :model-value="{
            title: '',
            description: formData?.comprehensiveHealthAssessment?.physicalExamination?.organExamination?.description || '',
            images: formData?.comprehensiveHealthAssessment?.physicalExamination?.organExamination?.images || []
          }"
          @update:model-value="(data) => {
            updateField('comprehensiveHealthAssessment.physicalExamination.organExamination.description', data.description);
            if (data.images && data.images.length > 0) {
              updateField('comprehensiveHealthAssessment.physicalExamination.organExamination.images', data.images);
            }
          }"
          :show-title="false"
          description-label="器官检查描述"
          description-placeholder="请输入器官检查相关内容"
          :description-rows="3"
          border-color="border-green-300"
        />
      </view>
    </view>

    <!-- 专项检查 -->
    <view class="subsection" v-if="!comm">
      <view class="subsection-header" @click="toggleSubsectionCollapse('specialExamination')">
        <text class="subsection-title">专项检查</text>
        <IconFont 
          :name="collapseStates.specialExamination ? 'arrow-up' : 'arrow-down'" 
          size="10" 
          color="#27c530" 
          :class="['transition-transform duration-200', collapseStates.specialExamination ? 'rotate-180' : 'rotate-0']"
        />
      </view>
      <view v-show="collapseStates.specialExamination" class="subsection-content">
        <ItemWithImagesCard
          :model-value="{
            title: '',
            description: formData?.comprehensiveHealthAssessment?.physicalExamination?.specialExamination?.description || '',
            images: formData?.comprehensiveHealthAssessment?.physicalExamination?.specialExamination?.images || []
          }"
          @update:model-value="(data) => {
            updateField('comprehensiveHealthAssessment.physicalExamination.specialExamination.description', data.description);
            if (data.images && data.images.length > 0) {
              updateField('comprehensiveHealthAssessment.physicalExamination.specialExamination.images', data.images);
            }
          }"
          :show-title="false"
          description-label="专项检查描述"
          description-placeholder="请输入专项检查相关内容"
          :description-rows="3"
          border-color="border-green-300"
        />
      </view>
    </view>

    <!-- 辅助检查 -->
    <view class="subsection" v-if="!comm">
      <view class="subsection-header" @click="toggleSubsectionCollapse('auxiliaryExamination')">
        <text class="subsection-title">辅助检查</text>
        <IconFont 
          :name="collapseStates.auxiliaryExamination ? 'arrow-up' : 'arrow-down'" 
          size="10" 
          color="#27c530" 
          :class="['transition-transform duration-200', collapseStates.auxiliaryExamination ? 'rotate-180' : 'rotate-0']"
        />
      </view>
      <view v-show="collapseStates.auxiliaryExamination" class="subsection-content space-y-[16rpx]">
        <!-- 实验室检查 -->
        <view class="sub-subsection">
          <view class="sub-subsection-header" @click="toggleSubSubsectionCollapse('laboratoryExamination')">
            <text class="sub-subsection-title">实验室检查</text>
            <IconFont 
              :name="collapseStates.laboratoryExamination ? 'arrow-up' : 'arrow-down'" 
              size="10" 
              color="#27c530" 
              :class="['transition-transform duration-200', collapseStates.laboratoryExamination ? 'rotate-180' : 'rotate-0']"
            />
          </view>
          <view v-show="collapseStates.laboratoryExamination" class="sub-subsection-content">
            <ItemWithImagesCard
              :model-value="{
                title: '',
                description: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.laboratoryExamination?.description || '',
                images: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.laboratoryExamination?.images || []
              }"
              @update:model-value="(data) => {
                updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.laboratoryExamination.description', data.description);
                if (data.images && data.images.length > 0) {
                  updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.laboratoryExamination.images', data.images);
                }
              }"
              :show-title="false"
              description-label="实验室检查描述"
              description-placeholder="请输入实验室检查相关内容"
              :description-rows="2"
              border-color="border-green-300"
            />
          </view>
        </view>

        <!-- 影像学检查 -->
        <view class="sub-subsection">
          <view class="sub-subsection-header" @click="toggleSubSubsectionCollapse('imagingExamination')">
            <text class="sub-subsection-title">影像学检查</text>
            <IconFont 
              :name="collapseStates.imagingExamination ? 'arrow-up' : 'arrow-down'" 
              size="10" 
              color="#27c530" 
              :class="['transition-transform duration-200', collapseStates.imagingExamination ? 'rotate-180' : 'rotate-0']"
            />
          </view>
          <view v-show="collapseStates.imagingExamination" class="sub-subsection-content">
            <ItemWithImagesCard
              :model-value="{
                title: '',
                description: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.imagingExamination?.description || '',
                images: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.imagingExamination?.images || []
              }"
              @update:model-value="(data) => {
                updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.imagingExamination.description', data.description);
                if (data.images && data.images.length > 0) {
                  updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.imagingExamination.images', data.images);
                }
              }"
              :show-title="false"
              description-label="影像学检查描述"
              description-placeholder="请输入影像学检查相关内容"
              :description-rows="2"
              border-color="border-green-300"
            />
          </view>
        </view>

        <!-- 内窥镜检查 -->
        <view class="sub-subsection">
          <view class="sub-subsection-header" @click="toggleSubSubsectionCollapse('endoscopicExamination')">
            <text class="sub-subsection-title">内窥镜检查</text>
            <IconFont 
              :name="collapseStates.endoscopicExamination ? 'arrow-up' : 'arrow-down'" 
              size="10" 
              color="#27c530" 
              :class="['transition-transform duration-200', collapseStates.endoscopicExamination ? 'rotate-180' : 'rotate-0']"
            />
          </view>
          <view v-show="collapseStates.endoscopicExamination" class="sub-subsection-content">
            <ItemWithImagesCard
              :model-value="{
                title: '',
                description: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.endoscopicExamination?.description || '',
                images: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.endoscopicExamination?.images || []
              }"
              @update:model-value="(data) => {
                updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.endoscopicExamination.description', data.description);
                if (data.images && data.images.length > 0) {
                  updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.endoscopicExamination.images', data.images);
                }
              }"
              :show-title="false"
              description-label="内窥镜检查描述"
              description-placeholder="请输入内窥镜检查相关内容"
              :description-rows="2"
              border-color="border-green-300"
            />
          </view>
        </view>

        <!-- 电生理检查 -->
        <view class="sub-subsection">
          <view class="sub-subsection-header" @click="toggleSubSubsectionCollapse('electrophysiologicalExamination')">
            <text class="sub-subsection-title">电生理检查</text>
            <IconFont 
              :name="collapseStates.electrophysiologicalExamination ? 'arrow-up' : 'arrow-down'" 
              size="10" 
              color="#27c530" 
              :class="['transition-transform duration-200', collapseStates.electrophysiologicalExamination ? 'rotate-180' : 'rotate-0']"
            />
          </view>
          <view v-show="collapseStates.electrophysiologicalExamination" class="sub-subsection-content">
            <ItemWithImagesCard
              :model-value="{
                title: '',
                description: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.electrophysiologicalExamination?.description || '',
                images: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.electrophysiologicalExamination?.images || []
              }"
              @update:model-value="(data) => {
                updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.electrophysiologicalExamination.description', data.description);
                if (data.images && data.images.length > 0) {
                  updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.electrophysiologicalExamination.images', data.images);
                }
              }"
              :show-title="false"
              description-label="电生理检查描述"
              description-placeholder="请输入电生理检查相关内容"
              :description-rows="2"
              border-color="border-green-300"
            />
          </view>
        </view>

        <!-- 病理学检查 -->
        <view class="sub-subsection">
          <view class="sub-subsection-header" @click="toggleSubSubsectionCollapse('pathologicalExamination')">
            <text class="sub-subsection-title">病理学检查</text>
            <IconFont 
              :name="collapseStates.pathologicalExamination ? 'arrow-up' : 'arrow-down'" 
              size="10" 
              color="#27c530" 
              :class="['transition-transform duration-200', collapseStates.pathologicalExamination ? 'rotate-180' : 'rotate-0']"
            />
          </view>
          <view v-show="collapseStates.pathologicalExamination" class="sub-subsection-content">
            <ItemWithImagesCard
              :model-value="{
                title: '',
                description: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.pathologicalExamination?.description || '',
                images: formData?.comprehensiveHealthAssessment?.physicalExamination?.auxiliaryExamination?.pathologicalExamination?.images || []
              }"
              @update:model-value="(data) => {
                updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.pathologicalExamination.description', data.description);
                if (data.images && data.images.length > 0) {
                  updateField('comprehensiveHealthAssessment.physicalExamination.auxiliaryExamination.pathologicalExamination.images', data.images);
                }
              }"
              :show-title="false"
              description-label="病理学检查描述"
              description-placeholder="请输入病理学检查相关内容"
              :description-rows="2"
              border-color="border-green-300"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'
import { IconFont } from '@nutui/icons-vue-taro'
import part0 from '@/pages/health/components/part0.vue'

// Props
interface Props {
  formData?: any
  comm: boolean
  updateField?: (path: string, value: any) => void
}

const props = withDefaults(defineProps<Props>(), {
  formData: () => ({}),
  comm: false,
  updateField: () => {}
})

// 折叠状态
const collapseStates = ref({
  // 体格检查子分类折叠状态
  organExamination: false,
  specialExamination: false,
  auxiliaryExamination: false,
  // 辅助检查子分类折叠状态
  laboratoryExamination: false,
  imagingExamination: false,
  endoscopicExamination: false,
  electrophysiologicalExamination: false,
  pathologicalExamination: false
})

// 切换子分类折叠状态
const toggleSubsectionCollapse = (section: string) => {
  collapseStates.value[section as keyof typeof collapseStates.value] = !collapseStates.value[section as keyof typeof collapseStates.value]
}

// 切换子子分类折叠状态
const toggleSubSubsectionCollapse = (section: string) => {
  collapseStates.value[section as keyof typeof collapseStates.value] = !collapseStates.value[section as keyof typeof collapseStates.value]
}
</script>

<style lang="scss" scoped>
.subsection {
  background: #f8f9fa;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
  border: 1px solid #e5e5e5;
}

.subsection-header {
  padding: 20rpx 24rpx;
  background: #f1f3f4;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 8rpx 8rpx 0 0;
  
  &:hover {
    background: #e8eaed;
  }
}

.subsection-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}

.subsection-content {
  padding: 20rpx;
}

.sub-subsection {
  background: white;
  border-radius: 6rpx;
  margin-bottom: 12rpx;
  border: 1px solid #e5e5e5;
}

.sub-subsection-header {
  padding: 16rpx 20rpx;
  background: #fafbfc;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 6rpx 6rpx 0 0;
  
  &:hover {
    background: #f1f3f4;
  }
}

.sub-subsection-title {
  font-size: 24rpx;
  font-weight: medium;
  color: #555;
}

.sub-subsection-content {
  padding: 16rpx;
}
</style>
